<template>
  <div class="table-room">
    <vab-query-form>
    <vab-query-form-left-panel>
      <el-button icon="el-icon-plus" type="primary"  @click="handleAdd(0,'')">
        添加房间
      </el-button>


    </vab-query-form-left-panel>
    <vab-query-form-right-panel>

      <el-select v-model="value1"   placeholder="机构名称"  @change="change" style="padding-top: 5px ">
        <el-option
          v-for="item in options"
          :key="item.institutionNumber"

          :label="item.institutionName"
          :value="item.institutionNumber">
        </el-option>
      </el-select>

      <el-select
        v-model="value2"
        style="margin-left: 10px;margin-right:10px;padding-top: 5px "
        placeholder="楼宇名称">
        <el-option
          v-for="item in number"
          :key="item.number"
          :label="item.name"
          :value="item.number">
        </el-option>
      </el-select>
      <el-button type="primary" @click="condition" style="padding-top: 5px ">条件查询</el-button>
    </vab-query-form-right-panel>
  </vab-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :default-sort="{prop:'number', order:'ascending'}"
      @sort-change="changeTableSort"

    >

      <el-table-column show-overflow-tooltip label="机构名称" width="200"  prop="institutionName">

      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="楼宇名称"
        prop="buildingName"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        prop="number"
        label="楼宇编号"
        sortable="'custom'"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="所属单元"
        prop="unit"
        sortable="'custom'"
      ></el-table-column>

      <el-table-column label="所属楼层" sortable="'custom'" >
        <template slot-scope="scope">
          {{scope.row.floor}}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="房间编号"

        prop="roomCode"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="房间朝向"
        prop="roomOrientationName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="房间类型"
        prop="roomTypeName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="计划床位"
        prop="numberOfBeds"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="备注信息"
        prop="remark"

      ></el-table-column>
      <el-table-column label="禁用状态" prop="disabled">
        <template slot-scope="scope">

          <el-switch
            v-model="scope.row.disabled"
            class="demo"
            active-color="#F04134"
            active-text="禁用"
            inactive-color="#11CED2"
            inactive-text="启用"
            @change="switchChange(scope.$index, scope.row)"

          />

        </template>


      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"    @click="handleAdd(scope.$index, scope.row)">修改 <i class="el-icon-edit"></i></el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)" >
            删除<i class="el-icon-delete"></i>
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"
      destroy-on-close
    >

      <el-form ref="form" :model="from"  label-width="80px" >
        <div class="active">
        <el-form-item label="机构名称" prop="institutionNumber">
          <el-select v-model="from.institutionNumber"   placeholder="机构名称"  @change="change(value,0)" style="padding-top: 5px;width:350px; " v-if="!isdisabled">
            <el-option
              v-for="item in options"
              :key="item.institutionNumber"
              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>
          </el-select>
          <span v-if="isdisabled">
             {{from.institutionName}}
          </span>
        </el-form-item>

        <el-form-item label="楼宇名称" prop="number" >
          <el-select v-model="from.number"   placeholder="楼宇名称" @change="changes"  style="padding-top: 5px;width:350px; " v-if="!isdisabled">
            <el-option
              v-for="item in option"
              :key="item.number"
              :disabled="item.disabled==1"
              :label="item.name"
              :value="item.number">
            </el-option>
          </el-select>
          <span v-if="isdisabled">
             {{from.buildingName}}
          </span>
        </el-form-item>
        <el-form-item label="所在楼层" prop="floor" >
<!--          <el-input v-model.number="from.floor" autocomplete="off" v-if="!isdisabled" type="number" min="1"></el-input>-->
          <el-select v-model="from.floor"   placeholder="所在楼层"  style="padding-top: 5px;width:350px; " v-if="!isdisabled">
            <el-option
              v-for="item in floors"
              :key="item.numberOfLayers"
              :label="item.numberOfLayers"
              :value="item.numberOfLayers">
            </el-option>
          </el-select>
          <span v-if="isdisabled" >
             {{from.floor}}
          </span>
        </el-form-item>
        <el-form-item label="所属单元" prop="unit">
<!--          <el-input v-if="!isdisabled"  v-model.number="from.unit" autocomplete="off" type="number" min="1"></el-input>-->
          <el-select v-model="from.unit"   placeholder="所属单元"  style="padding-top: 5px;width:350px; " v-if="!isdisabled">
            <el-option
              v-for="item in units"
              :key="item.units"
              :label="item.units"
              :value="item.units">
            </el-option>
          </el-select>
          <span v-if="isdisabled" >
             {{from.unit}}
          </span>
        </el-form-item>

        </div>
        <el-form-item label="房间编号" prop="roomCode">
          <el-input v-model="from.roomCode" autocomplete="off"  v-if="!isdisabled"></el-input>
          <span v-if="isdisabled">
             {{from.roomCode}}
          </span>
        </el-form-item>
        <el-form-item label="房间朝向" required>
          <el-select   v-model="from.roomOrientation.index"   @change="changeroomOrientation"placeholder="房间朝向" style="padding-top: 5px;width: 350px "
                       filterable
                       allow-create

          >
            <el-option
              v-for="item in roomOrientation"
              :key="item.dcNo"

              :label="item.name"
              :value="item.dcNo">
            </el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="房间类型"  required>

          <el-select   v-model="from.roomType"   placeholder="房间类型" style="padding-top: 5px;width: 350px "   @change="ch">
            <el-option
              v-for="item in roomType"
              :key="item.typeCode"


              :label="item.typeName"
              :value="item.typeCode">
            </el-option>

          </el-select>

        </el-form-item>
        <el-form-item label="计划床位" prop="numberOfBeds"  >
          <el-input v-model.number="from.numberOfBeds" autocomplete="off" type="number" min="1"></el-input>
        </el-form-item>

        <el-form-item label="备注信息">
          <el-input  type="textarea" v-model="from.remark"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="Saveadd">确 定</el-button>
      </div>


    </el-dialog>


  </div>
</template>

<script>
    import { dictionary } from "@/api/user";
    import { add} from "@/api/room";
    import { search,searchbuilding} from "@/api/room";
    import { searchtype} from "@/api/room";
    import { condition} from "@/api/room";
    import { doDelete } from "@/api/room";
    import { disable  } from "@/api/room";
    import { enableRoom  } from "@/api/room";
    export default {
        name: "Room",

        data() {


            return {


                options: "",
                 number: [

              ],
                floors:[

                ],
                units:[

                ],
                value:"",
                value1:'',
                value3:"",
                value2:"",
                roomOrientation:[],
                roomType:"",
                option: [

                ],

                methodsType:'put',

                dialogFormVisible: false,

                id:0,
                list:[],
                isdisabled:false,
                from:{
                    disabled:'false',
                    institutionNumber:"",
                    floor:'',
                    number:"",
                    numberOfBeds:"",
                    roomOrientation:{
                        index: '',
                        name: ''
                    },
                    roomType:"",
                    unit:"",
                    roomCode:"",
                    remark:"",

                },

                listLoading: true,
                layout: "total, sizes, prev, pager, next, jumper",
                total: 0,
                background: true,
                selectRows: "",
                elementLoadingText: "正在加载...",

                title:"添加房间",

                rules:{
                    institutionNumber: [{ required: true, trigger: "change", message: "机构名称"}],
                    floor: [{ required: true, trigger: "blur", message: "楼层" ,type: 'number'}],
                    number:[{  required: true, trigger: "change", message: "楼宇名称" }],
                    numberOfBeds:[{ required: true, trigger: "blur",message: "房间床位必须是数字", type: 'number'}],
                    roomOrientation:[{ trigger: "change", message: "房间朝向",type: 'number'}],
                    remark:[{  trigger: "blur", message: "备注信息" }],
                    unit:[{ required: true, trigger: "blur", message: "所属楼层" }],
                    roomCode:[{  required: true,trigger: "blur", message: "房间编号" }],
                    roomType:[{  trigger: "change", message: "房间类型" ,}],


                },
            };
        },
        created(){

            this.from.roomOrientation.index=JSON.parse(localStorage.getItem("dictionary"))
            for(var i=0;i< this.from.roomOrientation.index.length;i++){
                if( this.from.roomOrientation.index[i].mark=="roomOrientation"){
                    this.roomOrientation=( this.from.roomOrientation.index[i].childs)
                }
            }
            setTimeout(() => {
                this.value1=(localStorage.getItem("institutionNumber"));
                let institutionNumber=this.from.institutionNumber
                this.from.institutionNumber= (localStorage.getItem("institutionNumber"));
                  this.options= JSON.parse(localStorage.getItem("childinstitutionNumber"));
                    search({institutionNumber}).then(res => {

                        if (res.data) {
                            this.number = res.data
                            this.option = res.data
                            for (var i = 0; i < res.data.length; i++) {
                                this.value2 = res.data[i].number
                                this.from.number = res.data[i].number


                            }
                        }
                    })

            }, 1000);



            setTimeout(() => {
                this.condition()
            }, 1000);
        },
        methods:{
            changeTableSort(column){

                var fieldName = column.prop;
                var sortingType = column.order;

                //按照降序排序
                if(sortingType == "descending"){
                    this.list = this.list.sort((a, b) => b[fieldName] - a[fieldName]);
                }
                //按照升序排序
                else{
                    this.list = this.list.sort((a, b) => a[fieldName] - b[fieldName]);
                }


            },
            ch(value){
              console.log( this.from.roomType)


            },
            handleAdd(id,data) {
                this.dialogFormVisible=true

                this.id = data.id

                if(this.id>0){
                   console.log(data)
                    this.title="编辑房间";
                    this.isdisabled = true
                    this.methodsType = 'put'

                    this.from = {
                       roomOrientation: {
                            index:data.roomOrientation,

                        },
                        institutionNumber:data.institutionNumber,
                        id:data.id,
                        cuurrentNumberOfBeds:data.cuurrentNumberOfBeds,
                        version: data.version,
                        number:data.number,
                        institutionName: data.institutionName,
                        numberOfBeds:data.numberOfBeds,
                        buildingName:data.buildingName,
                        floor:data.floor,
                        unit:data.unit,
                        roomType:data.roomType,
                        roomCode:data.roomCode,
                        typeCode:data.typeCode,
                        remark:data.remark

                    }

                    let institutionNumber=data.institutionNumber
                    searchtype({institutionNumber}).then(res =>{

                        this.roomType=res.data


                    })
                }else{
                    this.units=[]
                    this.floors=[]
                    let institutionNumber=localStorage.getItem("institutionNumber")
                    search({institutionNumber}).then(res =>{

                        if(res.data){
                            this.number=res.data
                            this.option=res.data
                            for(var i=0;i<res.data.length;i++){
                                // this.value2=res.data[i].number
                                this.from.number=res.data[i].number


                            }
                            let institutionNumber=this.from.institutionNumber
                            let  number=this.from.number
                            searchbuilding({institutionNumber,number}).then(res =>{
                                if(res.data){
                                    for(var i=1;i<=res.data[0].numberOfLayers;i++){
                                        // console.log(res.data[0].numberOfLayers)

                                        this.floors.push({numberOfLayers:i})
                                        console.log(this.floors)

                                    }

                                    for(var i=1;i<=res.data[0].units;i++){
                                        // console.log(res.data[0].numberOfLayers)

                                        this.units.push({units:i})
                                        console.log(this.units)

                                    }
                                }



                            })
                        }


                    })
                    searchtype({institutionNumber}).then(res =>{

                        this.roomType=res.data
                        this.$set(this.from,'roomType',res.data[0].typeCode)
                        // this.from.roomType=res.data[0].typeCode
                        // for(var i=0;i<res.data.length;i++){
                        //
                        //
                        //
                        // }


                    })
                    this.title="添加房间";
                    this.isdisabled = false
                    this.methodsType = 'post'
                   this.from={
                      disabled:'false',
                      institutionNumber:institutionNumber,
                      floor:1,
                      number:this.from.number,
                      numberOfBeds:"",
                      roomOrientation:{
                          index:1,
                          name:"",
                      },
                      unit:1,
                      roomCode:"",
                      remark:"",

                  }

                }

            },
            Saveadd(){
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.id>0){

                            this.$baseConfirm("你确定要修改", null, async () => {

                                const {code} = await add(this.from,this.methodsType);
                                if(code==200){
                                    this.$baseMessage("修改成功");
                                    this.dialogFormVisible=false
                                    this.condition()

                                }else {
                                    return false
                                }
                            });

                        }else{
                            let  String=typeof (this.from.roomOrientation.index)
                            if(String=="number"){

                            }else {
                                this.from.roomOrientation.index=''
                            }

                            const {code} = await add(this.from,this.methodsType);
                            if(code==200){
                                dictionary().then(res =>{
                                    console.log(res.data)
                                    localStorage.setItem('dictionary',JSON.stringify(res.data));

                                    this.from.roomOrientation.index=JSON.parse(localStorage.getItem("dictionary"))
                                    for(var i=0;i< this.from.roomOrientation.index.length;i++){
                                        if( this.from.roomOrientation.index[i].mark=="roomOrientation"){
                                            this.roomOrientation=( this.from.roomOrientation.index[i].childs)
                                        }
                                    }
                                })
                                this.$baseMessage("添加成功");
                                this.dialogFormVisible=false
                                  this.condition()

                            }else {
                                return false
                            }
                        }




                    } else {
                        return false;
                    }
                });
            },
            changeroomOrientation(value,id){
                  let  String=typeof (value)
                if(String=="string"){
                    this.from.roomOrientation.name=value
                }else {

                }
            },
            change(value,id){
                this.id=id
                  let institutionNumber=this.from.institutionNumber


                 if(id==undefined){
                     let institutionNumber=this.value1

                   search({institutionNumber}).then(res =>{

                     this.number=res.data
                       for(var i=0;i<res.data.length;i++){
                           this.value2=res.data[i].number
                           this.from.number=res.data[i].number

                       }

                   })


                 }else {
                     let institutionNumber=this.from.institutionNumber

                   search({institutionNumber}).then(res =>{

                     this.option=res.data
                       for(var i=0;i<res.data.length;i++){
                            // this.value2=res.data[i].number
                           this.from.number=res.data[i].number


                       }
                       this.units=[]
                       this.floors=[]

                       let number=this.from.number
                       searchbuilding({institutionNumber,number}).then(res =>{
                           if(res.data){
                               for(var i=1;i<=res.data[0].numberOfLayers;i++){
                                   // console.log(res.data[0].numberOfLayers)

                                   this.floors.push({numberOfLayers:i})
                                   console.log(this.floors)

                               }

                               for(var i=1;i<=res.data[0].units;i++){
                                   // console.log(res.data[0].numberOfLayers)

                                   this.units.push({units:i})
                                   console.log(this.units)

                               }
                           }



                       })
                   })


                 }

                searchtype({institutionNumber}).then(res =>{

                    this.roomType=res.data
                    for(var i=0;i<res.data.length;i++){

                        this.from.roomType=res.data[i].typeCode

                    }


                })

            },
            changes(value){
                 this.from.number=value
                this.units=[]
                this.floors=[]
                let number=this.from.number
                let institutionNumber=this.from.institutionNumber
                searchbuilding({institutionNumber,number}).then(res =>{
                    if(res.data){
                        for(var i=1;i<=res.data[0].numberOfLayers;i++){
                            // console.log(res.data[0].numberOfLayers)

                            this.floors.push({numberOfLayers:i})
                            console.log(this.floors)

                        }

                        for(var i=1;i<=res.data[0].units;i++){
                            // console.log(res.data[0].numberOfLayers)

                            this.units.push({units:i})
                            console.log(this.units)

                        }
                    }



                })




            },
          switchChange(index,row){

            let number  =(row.number)

            let institutionNumber   =(row.institutionNumber )
            let roomCode    =(row.roomCode  )
            let floor    =(row.floor  )
            let unit    =(row.unit  )

            if(row.disabled==true){
              this.listLoading = true;
              disable({institutionNumber,number,roomCode,floor,unit}).then(res => {


                  this.$baseMessage("已禁用",'success');


              })
            }else {
                enableRoom({institutionNumber,number,roomCode,floor,unit}).then(res => {

                    this.$baseMessage("已启用",'success');



                })

            }
            setTimeout(() => {
              this.listLoading = false;
            }, 500);

          },
            condition(id,data){

                this.id = id




                this.listLoading = true;
                let limit=999999
                let currPageNo=1

                if(this.id==undefined){


                    let institutionNumber=this.from.institutionNumber
                    let number=this.from.number
                    condition({institutionNumber,number,limit,currPageNo}).then(res =>{


                        this.list=res.data.data
                        setTimeout(() => {
                            this.listLoading = false;
                        }, 500);

                    })
                }else {

                    let institutionNumber=this.value1
                    let number=this.value2

                    condition({institutionNumber,number,limit,currPageNo}).then(res =>{


                        this.list=res.data.data
                        setTimeout(() => {
                            this.listLoading = false;
                        }, 500);

                    })
                }

            },
            handleDelete(index,row) {

                let number  =(row.number)
                let institutionNumber   =(row.institutionNumber )
                let roomCode=row.roomCode
                let floor=row.floor
                let unit=row.unit
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {code, msg } = await doDelete(({number,institutionNumber,roomCode,floor,unit}));
                        if(code==200){

                            this.$baseMessage(msg, "success");
                            this.from.number=row.number
                            this.from.institutionNumber=row.institutionNumber
                            this.condition();
                        }else {

                        }
                    });
                }

            },
            close(){
                this.dialogFormVisible=false

            }
        }
    }
</script>

<style scoped>
  .table-room >>> .demo .el-switch__label {
    position: absolute !important;
    display: none !important;
    color: #fff !important;
  }
  .table-room >>>.el-switch__core{
    width: 50px !important;
  }
  /*打开时文字位置设置*/
  .table-room >>> .demo .el-switch__label--right {
    z-index: 1 !important;

  }
  /*关闭时文字位置设置*/
  .table-room >>> .demo .el-switch__label--left {
    z-index: 1 !important;
    left: 19px !important;
    margin-right: 0px !important;
  }
  .table-room  >>> .demo .el-switch__label.is-active span{
    font-size: 12px !important;
  }
  /*table-room*/
  .table-room >>> .demo .el-switch__label.is-active {
    display: block !important;
  }
  .table-room >>> .demo.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important !important;
  }

</style>
